<template>
    <div class="address_box">
        <div
            v-for="(item, index) in myAddress"
            :key="item.id"
            :class="{ address_item: true, active: (num || n) == index }"
        >
            <div class="item_left" @click="selectedAddress(index, item)">
                <div class="item_info">
                    <i>{{ item.name }}</i
                    ><span>{{ item.phone }}</span>
                </div>
                <div class="item_address">
                    <span class="default" v-if="item.default_set == '1'"
                        >默认</span
                    >
                    <span class="address"
                        >{{ item.area_name }} {{ item.desc }}</span
                    >
                </div>
            </div>
            <div class="item_right">
                <router-link
                    :to="{
                        name: 'editaddress',
                        params: {
                            ...item,
                        },
                    }"
                    >编辑</router-link
                >
            </div>
        </div>
    </div>
</template>

<script>
import { getMyAddress } from "../api/address";
export default {
    name: "addressListCom",
    data() {
        return {
            n: 0,
            // 我的地址
            myAddress: [],
        };
    },
    // 父组件控制子组件列表激活态
    props: ["num"],
    async created() {
        // this.n = this.num;
        const { data } = await getMyAddress();
        this.myAddress = data.result;
        console.log(this.myAddress);
        // 遍历数组，默认的地址排第一
        let index = this.myAddress.findIndex((ele) => {
            return ele.default_set == "1";
        });
        if (index <= 0) {
            console.log("不需要操作");
        } else {
            let temp = this.myAddress[index];
            this.myAddress.splice(index, 1);
            this.myAddress.unshift(temp);
        }
    },
    methods: {
        selectedAddress(index, addressInfo) {
            // 单独使用组件时，控制激活态
            this.n = index;
            // 与父组件联用，需要传递数据给父组件
            this.$emit("currentAddress", { addressInfo, n: index });
        },
    },
};
</script>

<style lang="scss" scoped>
// 地址列表
.address_box {
    width: 100vw;
    padding: 3.2vw;
    box-sizing: border-box;

    .address_item {
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: 21.333vw;
        padding: 1.6vw 2.667vw 2.667vw 2.667vw;
        margin-top: 2.133vw;
        border-radius: 2.667vw;
        color: #666;
        box-shadow: rgba(0, 0, 0, 0.24) 0px 0.8vw 2.133vw;
        .item_left {
            width: 69.333vw;
            .item_info {
                display: flex;
                align-items: center;
                i {
                    width: 32vw;
                    font-size: 4.8vw;
                }
                span {
                    width: 26.667vw;
                    font-size: 3.2vw;
                }
            }
            .item_address {
                overflow: hidden;
                line-height: 1.3;
                font-size: 3.733vw;
                .default {
                    font-weight: 700;
                }
            }
        }
        .item_right {
            width: 13.333vw;
            display: flex;
            justify-content: center;
            align-items: center;
            border-left: 0.267vw dashed #ccc;
            a {
                color: #666;
            }
        }
    }
    // 地址列表激活的样式
    .active {
        background-color: #c1ab96;
        color: #fff;
        transition: all 0.3s;

        .item_right {
            border-color: #fff;
            a {
                color: #fff;
            }
        }
    }
}
</style>